<template>
	<!-- 中捷 -->
	<view>
		<view class="container" v-for="(item,index) in cardinfo" :key="index">
			<zy-group :title="$t('public.productBox')+$t('public.colon') + item.code" model="insideCard">
				<view class="slot">
					<view class="text">
						<text class="sub">{{$t('public.productStatus')}}{{$t('public.colon')}}</text>
						<view class="subContent" v-if="item.status==0">
							<view
								style="background-color: #FFD764;border-radius: 50%;width: 30rpx;height: 30rpx;margin: auto 5rpx;">
							</view>{{$t('public.packing')}}
						</view>
						<view class="subContent" v-else-if="item.status==1">
							<view
								style="background-color: #409efe;border-radius: 50%;width: 30rpx;height: 30rpx;margin: auto 5rpx;">
							</view>{{$t('public.packed')}}
						</view>
						<view class="subContent" v-else-if="item.status==2">
							<view
								style="background-color: #ff0000;border-radius: 50%;width: 30rpx;height: 30rpx;margin: auto 5rpx;">
							</view>{{$t('public.inStoraged')}}
						</view>
						<view class="subContent" v-else-if="item.status==3">
							<view
								style="background-color: #2B9939;border-radius: 50%;width: 30rpx;height: 30rpx;margin: auto 5rpx;">
							</view> {{$t('public.outStoraged')}}
						</view>
					</view>
					<view class="text">
						<text class="sub">{{$t('public.productNum')}}{{$t('public.colon')}}</text>
						<view class="subContent">{{item.num||0}}{{$t('public.piece')}}</view>
					</view>
					<view class="text">
						<text class="sub">{{$t('public.productionNo')}}{{$t('public.colon')}}</text>
						<view class="subContent">{{item.productionTaskNo||$t('public.null')}}</view>
					</view>
					<!-- <view class="text" v-if="item.meters>=0">
						<text class="sub"
							:style="[{color:item.meters==0?`#ff0000`:``}]">{{$t('public.rollmatMeter')}}{{$t('public.colon')}}</text>
						<view class="subContent" :style="[{color:item.meters==0?`#ff0000`:``}]"><i
								class="iconfont icon-banben" style="margin: auto;"
								v-if="item.meters==0"></i>{{item.meters||0}}{{$t('public.meter')}}</view>
					</view> -->
					<!-- <view class="btn">
						<button :text="$t('public.detailInfo')" class="btn_detail" @click="goDetail(item)">
							{{$t('public.detailInfo')}}
						</button>
					</view> -->
				</view>
			</zy-group>
		</view>
		<!-- 弹出层 -->
		<zy-popup ref="popup" :title="$t('public.definite')">
			<zy-table :headList="headList" :dataList="dataList" border></zy-table>
		</zy-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnList: [{
					text: this.$t('public.detail'),
					handle: this.goDetail,
				}],
				headList: [{
						name: this.$t('public.color'),
						key: 'color',
					},
					{
						name: this.$t('public.size'),
						key: 'size',
					}, {
						name: this.$t('public.num'),
						key: 'num',
					}
				],
				dataList: [],
			}
		},
		props: {
			cardinfo: {
				type: Array,
				default: []
			}
		},
		methods: {
			goDetail(val) {
				let _this = this
				_this.$refs.popup.open()
				_this.$nextTick(() => {
					_this.dataList = val.boxDetailList
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.slot {
		padding: 0 20rpx;
	}

	.text {
		padding: 10rpx 0;
		display: flex;
		text-align: justify;
	}

	.sub {
		text-align: left;
	}

	.subContent {
		display: flex;
		margin: auto 20rpx auto auto;
	}

	.btn {
		width: 50%;
		margin: 10rpx auto 20rpx auto;
	}

	.btn_detail {
		word-spacing: 5rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		color: #fff;
		background-image: linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186));
	}
</style>